<script setup lang="ts" name="Login">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

import LoginAccount from "./component/loginAccount.vue";
import LoginPhone from "./component/loginPhone.vue";

const router = useRouter();
const loginType = ref("mobile");

const goPath = () => {
  router.push("/");
};
</script>
<template>
  <div class="loginCard">
    <!-- <LoginAccount
      @push="goPath()"
      v-model:type="loginType"
      v-if="loginType == 'account'"
    />
    <LoginPhone @push="goPath()" v-model:type="loginType" v-if="loginType == 'mobile'" /> -->
    
    <LoginPhone @push="goPath()" v-model:type="loginType" />
  </div>
</template>
<style lang="scss">
.loginCard {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .card {
    width: 400px;
    max-width: 90%;
    border-radius: 20px;
    box-shadow: 0 0 10px #dcdfe6;
    background-color: #fff;
    overflow: hidden;
    padding: 20px 50px 50px 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .loginSelect {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
  }
}
</style>
